<template>
    <div class="page-c">
        <div class="day-chart" id="day-chart"></div>
        <div class="tips" v-if="tips.length">
            <div class="tip c-title-5" v-for="i in tips">{{ i }}</div>
        </div>
        <div class="loading" v-show="loading">loading...</div>
    </div>
</template>

<script lang="ts" setup>
import { URL_TOKEN_DATA } from "@/comm/api";
import { get } from "@/comm/request";
import { debounce, sortList } from "@/comm/tooler";
import { initChartConfig } from "@/components/chart/config";
import { customStyle } from "@/components/chart/customStyle";
import { Bus, CLEVER_CHART_SWITCH, CLEVER_TYPE_SWITCH } from "@/connetion/Bus";
import { useCapital } from "@/stores/capital";
import { ChartType, useClever } from "@/stores/clever";
import { onMounted, watch, ref } from "vue";

let chart: any;
const capital = useCapital();
const clever = useClever();
const loading = ref(false);
const tips = ref<any[]>([]);

watch(
    () => clever.interval,
    (newVal, oldVal) => {
        capital.loadKlineData();
    }
);

watch(
    () => capital.klineDataList,
    (newVal, oldVal) => {
        loading.value = newVal.length == 0;
        chart.applyNewData([]);
        setTimeout(() => {
            chart.applyNewData(newVal);
            newVal.forEach((val, id) => {
                if (id % 80 == 0) {
                    addOverlay(val);
                }
            });
        }, 90);
    }
);

const addOverlay = (data: any) => {
    // console.error("addOverlay", data);
    chart.createOverlay({
        name: "pot",
        lock: true,
        extendData: {
            color: Math.random() > 0.5 ? "#f6475d" : "#0dcb81"
        },
        points: [
            {
                timestamp: data.timestamp,
                value: data.close
            }
        ],
        onMouseEnter: function (event: any) {
            // console.log("onMouseEnter", event)
            let param = event.overlay.extendData;
            tips.value = [param.color];
        },
        onMouseLeave: function (event: any) {
            tips.value = [];
        }
    });
};

const loadData = async (token: string) => {
    let res: any = await get(URL_TOKEN_DATA, { token });
    console.log(res, "日k");
    let list = res.data ? res.data.tokenDayDatas : [];

    let aim = list.map((i: any, idx: number) => {
        let n = Number(i.priceUSD);
        let open = idx > 0 ? Number(list[idx - 1].priceUSD) : n;
        let max = Math.max(open, n);
        let min = Math.min(open, n);
        return {
            timestamp: i.date * 1000,
            open: open,
            close: n,
            low: min,
            volume: 0,
            high: max
        };
    });

    sortList(aim, "timestamp", false);

    setTimeout(() => {
        chart.applyNewData(aim);
    }, 90);
};

const { init, registerOverlay, registerFigure, getFigureClass, getSupportedFigures, registerIndicator } = (window as any)["klinecharts"];
onMounted(async () => {
    await initChartConfig();
    chart = init("day-chart");
    chart.setStyles(customStyle);
    chart.setStyles({
        candle: {
            type: "candle_solid"
        }
    });
    // let tid = 0;
    // chart.subscribeAction("onCandleBarClick", (data:any)=>{
    //     console.log(data);
    //     clearTimeout(tid);
    //     tid = window.setTimeout(()=>{
    //         capital.changeTransactionsTimestamp(data.data.timestamp);
    //         capital.loadPosition(data.data.timestamp);
    //         capital.loadTransaction();
    //     }, 300);
    // });

    Bus.on(CLEVER_TYPE_SWITCH, (val: any) => {
        console.log("val", val);
        console.log(chart);
        if (val.value == "line") {
            clever.toggleChartType();
            chart.setStyles({
                candle: {
                    type: clever.chartType
                }
            });
        } else {
            clever.changeInterval(val.value);
        }
    });

    window.addEventListener("resize", () => {
        // console.log(chart);
        chart.resize();
    });

    Bus.on(CLEVER_CHART_SWITCH, () => {
        console.log("切换表格");
        var t = chart?.getDataList();
        setTimeout(() => {
            chart?.resize(t);
        }, 200);
        setTimeout(() => {
            chart?.applyNewData(t);
        }, 300);
        chart?.resize();
    });
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
